<template>
  <div class="container">
    <el-form :rules="rule" ref="form" :model="form" label-position="left">
      <div class="title-container">
        <h3>套餐编辑</h3>
      </div>
      <el-form-item label="驾驶证等级:">
        <el-input v-model="form.name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="报考要求:" prop="requirement">
        <el-input type="textarea" v-model="form.requirement" style="width: 60%;" :rows="8"></el-input>
      </el-form-item>
      <el-form-item label="套餐说明:" prop="package">
        <el-input type="textarea" v-model="form.package" style="width: 60%;" :rows="8"></el-input>
      </el-form-item>
      <div class="button-container">
        <el-button type="primary" @click.prevent="edit" icon="el-icon-edit" :loading="loading">编辑</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import  { packageList, updatePackage } from '@/api/package'
    export default {
        name: "edit",
        inject: ['reload'],
        data () {
            return {
                level_id: 0,
                form: {
                    name: '',
                    requirement: '',
                    package: ''
                },
                rule:{
                    requirement: [
                        {required: true, message: '报考要求是必填项'},
                        {min: 20, max:300, message: '报考要求必须在20到300个字符之间'}
                    ],
                    package: [
                        {required: true, message: '套餐说明是必填项'},
                        {min: 20, max: 300, message: '套餐说明必须在20到300个字符之间'}
                    ]
                },
                loading: false,
            };
        },
        mounted() {
          this.level_id = this.$route.query.id;
            packageList({id: this.level_id}).then(response => {
                if (response.data.length == 0) {
                    this.$notify({
                        title: '警告',
                        message: '获取套餐信息失败',
                        type: 'error'
                    });
                } else {
                    let result = response.data[0];
                    this.form.name = result.name.slice(-2);
                    this.form.requirement = result.requirement;
                    this.form.package = result.package;
                }
            })
        },
        methods: {
            //编辑提交方法
            edit() {
              this.$refs.form.validate(valid => {
                  if (!valid) {
                      return false;
                  }
                  this.loading = true;
                  let data = {
                      level_id: this.level_id,
                      requirement: this.form.requirement,
                      package: this.form.package
                  };
                  updatePackage(data).then(response => {
                    this.loading = false;
                    this.$message.success(response.msg);
                    this.reload();
                  }).catch(() => {
                    this.loading = false;
                    this.$notify.error('更新套餐信息失败');
                  })
              });
            }
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    min-width: 100%;
    width: 100%;
    overflow: hidden;

    .el-form {
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      width: 700px;
      max-width: 100%;
      position: relative;
      margin: 10px auto;
      overflow: hidden;

      .title-container{
        width: 100%;
        text-align: center;
        h3 {
          font-size: 20px;

        }
      }
      .el-form-item {
        margin-left: 20px;
      }
      .el-input {
          width: 30%;
      }

      .button-container {
        width: 30%;
        margin: 10px auto;
        .el-button {
          width: 100%;
        }
      }
    }
  }
</style>
